<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备录入</title>
    <meta name="viewport" content="width=device-width"/>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="js/ajax.js"></script>
</head>
<body>
<div id="app" style="display:none;">

    <img v-if="barimgsrc" :src="'http://47.110.59.63/findimg?fileName='+barimgsrc" width="100%" />

    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">设备类型</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" name="select2" v-model="eq.equipmentType.id">
                    <option v-for="t in ets" :value="t.id">{{t.typeName}}</option>
                </select>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">设备名称</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="eName"
                       placeholder="请输入设备名称"  v-model="eq.name" />
            </div>
            <div class="weui-cell__ft">
                <i class="weui-icon-warn"></i>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传</p>
                        <!--<div class="weui-uploader__info">0/5</div>-->
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                            <li v-for="p in allpics"
                                class="weui-uploader__file"
                                :class="{'weui-uploader__file_status':p.progress<100}"
                                :style="'background-image:url('+p.url+')'">
                                <div class="weui-uploader__file-content">{{p.progress}}%</div>

                            </li>
                            <!--<li class="weui-uploader__file"-->
                            <!--style="background-image:url(http://www.hfjava.com/api.php?url=https://weui.io/images/pic_160.png)"></li>-->
                            <!--<li class="weui-uploader__file"-->
                            <!--style="background-image:url(http://www.hfjava.com/api.php?url=https://weui.io/images/pic_160.png)"></li>-->
                            <!--<li class="weui-uploader__file weui-uploader__file_status"-->
                            <!--style="background-image:url(http://www.hfjava.com/api.php?url=https://weui.io/images/pic_160.png)">-->
                            <!--<div class="weui-uploader__file-content">-->
                            <!--<i class="weui-icon-warn"></i>-->
                            <!--</div>-->
                            <!--</li>-->
                            <!--<li class="weui-uploader__file weui-uploader__file_status"-->
                            <!--style="background-image:url(http://www.hfjava.com/api.php?url=https://weui.io/images/pic_160.png)">-->
                            <!--<div class="weui-uploader__file-content">50%</div>-->
                            <!--</li>-->
                        </ul>

                        <div class="weui-uploader__input-box">
                            <input id="uploaderInput" class="weui-uploader__input"
                                   onchange="upload()"

                                   type="file" accept="image/*" multiple/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <a href="javascript:;" onclick="addEq()"
       style="width:90%;margin-top:20px;" class="weui-btn weui-btn_primary"
    >录入</a>
</div>

<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script src="js/getopenid.js"></script>
<script>
    getopenid(function(openid){

        $.showLoading("正在加载...");
        $.get("/find_baoxiuman_byopenid", {openid: openid}, function (data) {
            $.hideLoading();
            if (!data) {
                $.toast("您还未绑定，请您先绑定！","cancel",function(){
                    location = 'baoxiuman_add.html';
                })
            }else{
                app.style.display= "";
            }
        });
    });
    var v = new Vue({
        el: "#app",
        data: {
            barimgsrc:'',
            ets: [],
            uploadedPics: [],
            allpics: [],
            isAdd:false,
            eq:{
                name:"",
                equipmentType:{
                    id:0
                },
                equipmentPics:[]
            }
        }
    });

    $.showLoading("正在加载...");
    $.get("/find_all_et", {}, function (data) {
        //console.log(data);
        v.ets = data;


        $.hideLoading();
    })


    function upload() {
        var uploadedPics = new Array(uploaderInput.files.length);

        for (let i = 0; i < uploaderInput.files.length; i++) {
            var formdata = new FormData();
            formdata.append("file", uploaderInput.files[i]);


            uploadedPics[i] = {url: '', progress: 0,picurl:''};
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    // console.log(percentComplete)
                    //v.uploadedPics[i] = percentComplete;
                    uploadedPics[i].progress = percentComplete;
                    v.uploadedPics = uploadedPics;
                }
                else {
                    //document.getElementById('progressNumber').innerHTML = 'unable to compute';
                }
            }, false);
//            xhr.addEventListener("load", uploadComplete, false);
//            xhr.addEventListener("error", uploadFailed, false);
//            xhr.addEventListener("abort", uploadCanceled, false);

            xhr.onreadystatechange = function(){
                if(xhr.readyState==4&&xhr.status==200){
                    uploadedPics[i].picurl = xhr.responseText;
                    v.isAdd = true;
                }
            }
            xhr.open("POST", "epupload");//修改成自己的接口
            xhr.send(formdata);

            var fr = new FileReader();
            fr.readAsDataURL(uploaderInput.files[i]);

            fr.onload = function (res) {
                //console.log(res.target.result);
                //v.uploadedPics[i].url =res.target.result;
                uploadedPics[i].url = res.target.result;
                v.uploadedPics = uploadedPics;
                v.allpics = v.allpics.concat(v.uploadedPics);
            }
        }


    }

    function addEq(){
        if(!v.isAdd){
            if(v.allpics.length>0){
                $.showLoading("请稍后...");

                setTimeout(function(){
                    $.hideLoading();
                    //addEq();
                },1000);
            }else{
                $.toast("请检查所填项目","cancel");
                return;
            }
        }


        for(var i = 0;i<v.allpics.length;i++){
            v.eq.equipmentPics.push({
                url:v.allpics[i].picurl
            });
        }

        ajax("addeq",v.eq,function(data){
            v.barimgsrc = data.barCode;
            $.toast("录入成功！")
            v.allpics = [];
            v.eq = {
                name:"",
                equipmentType:{
                    id:0
                },
                equipmentPics:[]
            }
        });
    }


    //    function uploadComplete(evt) {
    //        /* 服务器端返回响应时候触发event事件*/
    //        alert(evt.target.responseText);
    //    }
    //    function uploadFailed(evt) {
    //        alert("There was an error attempting to upload the file.");
    //    }
    //    function uploadCanceled(evt) {
    //        alert("The upload has been canceled by the user or the browser dropped the connection.");
    //    }
</script>

</body>
</html>